<template>
  <EChart
    class="display-amount-chart"
    :option="option"
    v-if="option"
    height="500px"
  />
</template>

<script lang="ts">
import { DisplayDateItem } from "model";
import { defineComponent, PropType } from "vue";
import EChart from "./EChart.vue";

export default defineComponent({
  name: "DisplayAmountChart",
  props: {
    dataIn: {
      type: Object as PropType<Array<DisplayDateItem>>,
      required: true,
    },
    dataOut: {
      type: Object as PropType<Array<DisplayDateItem>>,
      required: true,
    },
  },
  components: {
    EChart,
  },
  setup(props) {
    const dateList = props.dataIn.map(function (item) {
      return item.date;
    });
    const valueList = props.dataIn.map(function (item) {
      return Math.floor(item.mean);
    });

    const dateList1 = props.dataOut.map(function (item) {
      return item.date;
    });
    const valueList1 = props.dataOut.map(function (item) {
      return Math.floor(item.mean);
    });

    const option = {
      // Make gradient line here
      visualMap: [
        {
          show: false,
          type: "continuous",
          seriesIndex: 0,
        },
      ],
      toolbox: {
        show: true,
        feature: {
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ["line", "bar"] },
          restore: { show: true },
          saveAsImage: { show: true },
        },
      },
      legend: {
        data: ["室内设备温度", "室外设备温度"],
        left: 10,
      },
      title: [
        {
          left: "center",
          text: "设备温度变化曲线",
        },
      ],
      tooltip: {
        trigger: "axis",
      },
      xAxis: [
        {
          data: dateList,
        },
      ],
      yAxis: [
        {
          type: "value",
          max: function (value: { max: number; min: number }) {
            return Math.floor(value.max + 3);
          },
          min: function (value: { max: number; min: number }) {
            return Math.floor(value.min - 3);
          },
          axisLabel: {
            formatter: "{value} °C",
          },
        },
      ],
      series: [
        {
          name: "室内设备温度",
          type: "line",
          showSymbol: false,
          data: valueList,
          markPoint: {
            data: [
              { type: "max", name: "最大值" },
              { type: "min", name: "最小值" },
            ],
          },
          markLine: {
            data: [{ type: "average", name: "平均值" }],
          },
        },
        {
          name: "室外设备温度",
          type: "line",
          showSymbol: false,
          data: valueList1,
          markPoint: {
            data: [
              { type: "max", name: "最大值" },
              { type: "min", name: "最小值" },
            ],
          },
          markLine: {
            data: [{ type: "average", name: "平均值" }],
          },
        },
      ],
    };

    return {
      option,
    };
  },
});
</script>

<style scoped lang="scss"></style>
